import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Input,
  Modal,
  Row,
  Col,
  Button,
  message,
} from 'antd';
import { connect } from 'dva';


const FormItem = Form.Item;


@connect(({ Account, loading }) => ({
  Account,
}))
@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
    this.state = {
      btnText: '发送验证码',
      timer: 60,
      discodeBtn: false,
    };
  }

  // 表单
  renderContent = () => {
    const { form, dispatch } = this.props;
    const { btnText, discodeBtn } = this.state;

    let _this = this;
    const getCode = () => {

      const { timer } = this.state;
      dispatch({
        type: 'Account/sendCode',
        callback(res) {
          console.log(res);
          if (res.code === 200) {
            message.success('发送成功');
            let cloneTime = JSON.stringify(timer);
            let newTime = '';
            let siv = setInterval(() => {
              newTime = --cloneTime;
              _this.setState({
                sendCode: true,
                discodeBtn: true,
                timer: newTime,
                btnText: newTime + 's',
              });
              if (newTime === 0) {
                clearInterval(siv);
                _this.setState({ btnText: '重新发送', discodeBtn: false ,timer:60});
              }
            }, 1000);
          } else {
            message.error(res.errMsg);
          }
        },
      });
      //
    };
    return [
      <FormItem key="code" {...this.formLayout} label="验证码">
        {form.getFieldDecorator('code', {
          rules: [{ required: true, message: '请输入验证码！' }],
        })(<Row gutter={16}>
          <Col span={15}><Input type={'code'} placeholder="请输入验证码"/></Col>
          <Col span={9}><Button disabled={discodeBtn} type="primary" onClick={getCode}>{btnText}</Button></Col>
        </Row>)}
      </FormItem>,
      <FormItem key="pwd" {...this.formLayout} label="新密码">
        {form.getFieldDecorator('pwd', {
          rules: [{ required: true, message: '请输入新密码！' }],
        })(<Input type={'password'} placeholder="请输入新密码"/>)}
      </FormItem>,
    ];
  };

  //弹窗
  render() {
    const { handleModalVisible, modalVisible } = this.props;

    //完成
    const handleNext = () => {
      const { form, values, handleChangePwd } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        handleChangePwd(formVals);
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={'修改密码'}
        visible={modalVisible}
        onOk={handleNext}
        onCancel={() => handleModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
